<template>
	<view class="invi-bg">
		<u-navbar title="提现" :autoBack="true" :placeholder="true">
		</u-navbar>
	    <view class="drawal-top">
	    	<view class="left">
	    		<view class="">
	    			账户余额
	    		</view>
				<view class="num">
					{{data.balanceNum}}
				</view>
	    	</view>
			<view class="right">
				提现明细
			</view>
	    </view>
		<view class="title">
			选择提现方式
		</view>
		<view class="drawal-content">
			<image src="../../static/images/zfb.png" class="img" mode=""></image>
			<view class="name">
				{{data.name}}
			</view>
			<view class="">
				修改>
			</view>
		</view>
		<view class="title">
			选择提现金额
		</view>
		<view class="drawal-num-list">
			<view class="item" v-for="item in drawalList" @click="drawalNum = item" :class="drawalNum == item?'active':''">
				{{item}}元
			</view>
		</view>
		<view class="drawal-order">
			<view class="left">
				其他金额
			</view>
			<u--input placeholder="请输入提现金额" v-model="drawalNum" border="false" type="number"></u--input>
			
		</view>
		<view class="drawal-order-btn">
			<view class="">
				提现收取0%的手续费，实际到账10.00元
			</view>
		    <view class="drawal-all" @click="drawalNum = data.balanceNum">
		    	全部提现
		    </view>
			
		</view>
		<u-button class="drawal-btn" text="提现" type="primary" @click="subitDrawal()"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{balanceNum:'',name:''},
				drawalNum:0,
				drawalList:[10,20,50,100,200,500],
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			subitDrawal(){
			console.log(this.drawalNum)
					if(this.drawalNum > 0){
						this.$api.goDrawal({
							amount:this.drawalNum
						}).then(res=>{
							uni.showToast({ title: '提现成功的数字', duration: 2000 });
						}).catch(err=>{
							uni.showToast({ title: '提现失败', duration: 2000 });
						})
						
					}else{
					uni.showToast({ title: '请输入大于0的数字', duration: 2000 });
					}
				
			},
			getData() {
				this.$api.withDrawal().then(res => {
					this.data.balanceNum = res.account_balance
					this.data.name = res.alipay_account
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.drawal-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top:30rpx;
	.left{
		font-size:24rpx;
		color:#000;
		display: flex;
		flex-direction: column;
		gap:20rpx;
		align-items: center;
		.num{
			font-size: 35rpx;
		}
	}
	.right{
		height:60rpx;
		width: 150rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color:#fff;
		background: rgb(245, 108, 108);
	}
}
.invi-bg{
	padding:0 20rpx;
}
.drawal-btn{
	position: fixed;
	bottom:0;
	left:0;
	width: 100vw;
}
.drawal-content{
	display: flex;
	align-items: center;
	margin:30rpx 0;
	gap:30rpx;
	border:1px solid #f63a38;
	padding:15rpx;
	border-radius: 30rpx;
	.img{
		height: 40rpx;
		width: 40rpx;
	}
	.name{
		flex:1;
	}
}
.title{
	font-size: 28rpx;
	color:#333;
	font-weight: bold;
	margin:40rpx 0;
}
.drawal-num-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:20rpx 0;
	.item{
		height: 130rpx;
		width: 32%;
		background: #f6f6f6;
		border-radius: 15rpx;
		font-size: 30rpx;
		font-weight: bold;
		color:#000;
		display:flex;
		align-items: center;
		border:1px solid #f6f6f6;
		justify-content: center;
	}
	.active{
		border:1px solid #f63a38;
		background:#fff3f3 ;
	}

}
	.drawal-order{
		height:80rpx;
		background: #f6f6f6;
		display: flex;
		margin-top:20rpx;
		border-radius: 25rpx;
		align-items: center;
		padding:0 20rpx;
		.left{
			font-size: 28rpx;
			color:#333;
			font-weight: bold;
		}
		
	}
	.drawal-order-btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:20rpx;
		.drawal-all{
			color:#f63a38;
		}
	}
</style>